import React from 'react'

import WechatImage from './WechatImage'

class AssetGridCell extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    // var $this = $(ReactDOM.findDOMNode(this));
    // console.log(this.props.data)
  }

  componentDidUpdate() {

  }

  renderOtherNews() {
    var self = this;
    var content = [];
    if (!this.props.data || !this.props.data.content) {
      return "";
    }else {

      for (var i = 0; i < this.props.data.content.news_item.length; i++) {
        var item = this.props.data.content.news_item[i];
        if (this.props.data.content.news_item.length > 1 && i == 0) {
          continue;
        }
        content.push((
          <div className="cell-other-item row">
            <div className="col-sm-12 text">
              {item.title}
            </div>
            <div className="col-sm-3 image f-dn">
              <WechatImage
                wechat = {self.props.wechat}
                media_id={item.thumb_media_id}/>
            </div>
          </div>
        ))
      }

      return content

    }
  }

  render() {
    var self = this;
    var data = this.props.data
    var headerText;

    if (!data || !data.content) {
      return (<div></div>)
    }

    if (data.content.news_item.length > 1) {
      headerText = (<div className="title cell-item">{data.content.news_item[0].title}</div>)
    }
    var className = "col-sm-6 col-lg-4 asset-grid-cell "
    if (this.props.selected) {
      className += "asset-grid-cell-selected"
    }
    // console.log(className)
    return(
      <div className={className}
            onClick={(event)=>this.props.onAssetGridClick(data.media_id, data.content, self)}>
        <div className="created-at cell-item"></div>
        <div className="image cell-item">
          <WechatImage
            wechat = {self.props.wechat}
            media_id = {data.content.news_item[0].thumb_media_id}
          />
          {headerText}
        </div>

        <div className="cell-others">
          {self.renderOtherNews()}
        </div>
      </div>
    )
  }
}

export default AssetGridCell
